<template>
  <div v-if="dropdown1" :class="look == true ? 'yincan' : ''">
    <div
      class="advacedform"
      :style="{ top: top + 'px' }"
      :class="advanceditemlistCheck ? 'advacedformactive' : ''"
    >
      <div
        class="formItem f-a-c"
        v-for="(item, index) in advanceditemTypeList"
        :key="index"
        @click="advancedListClicks(item, index)"
      >
        <img :src="item.url" alt="" />
        <span>{{ item.name }}</span>
      </div>
    </div>

    <!-- <div class="classbox" :style="{ top: top + 'px' }">
      <div class="classboxnwq" v-if="advanceditemlistCheck">
        <div
          class="advacedformBox"
          :class="advanceditemlistCheck ? 'advacedformBoxactive' : ''"
          
        >
          <div class="adbox">
            <div
              class="formItem f-a-c"
              v-for="(item, index) in detailTypeList"
              :key="index"
            >
              <div>
                <div class="formType f-a-c">
                  <div class="line"></div>
                  <span>{{ item.name }}</span>
                </div>
                <div class="formbox f-a-c">
                  <div
                    class="boxitem f-a-c"
                    v-for="(items, indexs) in item.child"
                    :key="indexs"
                    :class="item.menucurrent == indexs ? 'formboxactive' : ''"
                    @click="listItemTypeCLICK(item, indexs, items, index)"
                  >
                    <span>{{ items.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="xuanbutton f-j-a-c">
          <div
            class="advacedformBoxcomconfg click f-j-a-c"
            @click="querensousuo"
          >
            <span>确认</span>
          </div>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { categoryList } from "@/axios/api.js";
import { useRouter } from "vue-router";
import {
  computed,
  defineComponent,
  onMounted,
  reactive,
  toRefs,
  getCurrentInstance,
  onUnmounted,
  watch,
} from "vue";
import { useStore } from "vuex";

export default defineComponent({
  props: {
    dropdown1: {
      type: Boolean,
      default: false,
    },
    top: {
      type: [Number, String],
      default: 71,
    },
    listArr: {
      type: Array,
      default: [],
    },
    look: {
      type: Boolean,
      default: false,
    },
    // propsData: {
    //   type: Object,
    //   default: () => {},
    // },
  },

  setup(props, { attrs, slots, emit }) {
    watch(
      () => props.dropdown1,
      (newVal, oldVal) => {
        if (newVal == true) {
          data.advanceditemlistCheck = false;
          data.advacedCheck = false;
        }
      }
    );
    watch(
      () => props.listArr,
      async (newVal, oldVal) => {}
    );
    const router = useRouter();
    const { proxy } = getCurrentInstance();
    let store = useStore();
    let data = reactive({
      advanceditemTypeList: [],
      detailTypeList: [], // 高级查询详细分类

      advanceditemlistCheck: false,
      advacedCheck: false,
      advacedCurrent: -1,
      boxlist: [],
      list: [],
    });


    // 反向回显
    let gobackView = () => {
      let newarr = [];
      let names = "";
      let arr = props.listArr;
      if (!arr.length) return;
      names = data.advanceditemTypeList[arr[0]-1].name;
      // data.advanceditemTypeList.forEach((item, index) => {
      //   console.log(item)
      //   item.child.forEach((it, inx) => {
      //     let result = it.child.filter((obj) => arr.includes(obj.id));
      //     if (result.length) {
      //       newarr.push(result[0].name);
      //     }
      //   });
      // });
      // newarr.forEach((items, indexs) => {
      //   names += items;
      //   if (indexs !== newarr.length - 1) {
      //     names += "/";
      //   }
      // });
      emit("goback", names);
    };
    // 高级选择
    let listItemTypeCLICK = (item, index, items, ind) => {
      let type;
      item.menucurrent = index;
      let datas = {};

      datas.ind = ind;
      datas.id = items.id;
      datas.name = items.name;
      if (!data.boxlist.length) {
        data.boxlist.push(datas);
      } else {
        // console.log(data.boxlist.indexOf(ind)); // 输出 1
        const index = data.boxlist.findIndex((it) => it.ind === ind);
        if (index !== -1) {
          data.boxlist.splice(index, 1, datas);
        } else {
          data.boxlist.push(datas);
        }
      }
    };

    // 高级搜索列表查询
    let getcategoryList = () => {
      categoryList().then((res) => {
        let datalist = res.data;
        datalist.forEach((item, index) => {
          if (item.name == "全部") {
            datalist.splice(index, 1);
          }
        });
        data.advanceditemTypeList = datalist;
        if (props.look) {
          gobackView();
        }
      });
    };
    let advanceditemlistClick = (item) => {
      //   if (index == 0) {
      //     data.advacedCheck = false;
      //     return;
      //   }
      //   data.advanceditemlistCheck = true;
    };
    // 高级选择点击
    let advancedListClicks = (items, index) => {
      let ids = index + 2;
      data.typeindex = ids - 1;
      //   console.log(data.typeindex);
      data.detailTypeList = [];
        // data.advanceditemTypeList.forEach((item, index) => {
        //   if (items.id == item.id) {
        //     // console.log(item.child[index]);
        //     item.child.forEach((itemsx, indexs) => {
        //       itemsx.child.forEach((ites, indes) => {
        //         // console.log(ites);
        //         ites.check = false;
        //       });
        //     });
        //     data.detailTypeList = item.child;
        //   }
        // });
      // data.advanceditemlistCheck = true;
      let arrdata = [];
      let typelistdata = {}
      typelistdata.types = data.typeindex;
      typelistdata.name = items.name;
      arrdata.push(typelistdata);
      emit("successChoose", arrdata);

    };

    // 高级搜索
    let querensousuo = () => {
      data.advanceditemlistCheck = false;
      data.advacedCheck = false;
      let arrdata = [];
      let typelistdata = {};
      let name = "";
      typelistdata.types = data.typeindex;
      arrdata.push(data.boxlist);
      arrdata.push(typelistdata);
      arrdata[0].forEach((item, index) => {
        name += item.name;
        if (index !== arrdata[0].length - 1) {
          name += "/";
        }
      });
      typelistdata.name = name;
      emit("successChoose", arrdata);
    };
    onMounted(() => {
      getcategoryList();
    });
    onUnmounted(() => {});
    return {
      gobackView,
      querensousuo,
      listItemTypeCLICK,
      advanceditemlistClick,
      advancedListClicks,
      getcategoryList,
      ...toRefs(data),
    };
  },
});
</script>
<style lang="scss" scoped>
.yincan {
  display: none;
}
.moban {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.wenhaolist {
  position: fixed;
  right: 130px;
  bottom: 97px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  // padding: 10px 0 0 10px;
  .wenhao_item {
    padding: 0 34px 0 10px;

    cursor: pointer;
    height: 46px;
    > span {
      margin-left: 10px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000;
    }
    &:hover {
      background: rgba(100, 200, 220, 0.12);
      > span {
        color: #64c8dc;
      }
    }
  }
}

.timeHeight {
  height: auto !important;
  left: 239px !important;
}
.sortbgcHeight {
  height: auto !important;
  left: 158px !important;
}
.sortbgc {
  background: rgba(100, 200, 220, 0.12) !important;
  > span {
    color: #67c9dc !important;
  }
}
::v-deep .el-slider__bar {
  background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
}
::v-deep .el-slider__runway {
  border-radius: 5px;
  background-color: #e4e7ed;
}
::v-deep .el-slider__stop {
  display: none;
}
::v-deep .el-slider__marks-text {
  margin-top: -34px;
}
::v-deep .el-slider__button {
  border: none;
  background-image: url("../../../assets/image/icon-hua@2x.png");
  background-size: 100% 100%;

  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
}
::v-deep .el-slider__marks-text {
  font-size: 14px;
  font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  font-weight: 400;
  color: #000000;
}
.priceChoose {
  position: absolute;
  top: 50px;
  z-index: 10;
  right: 0;
  width: 422px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 20px;
  padding-bottom: 70px;
  .priceTop {
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
      &:last-child {
        margin-left: 10px;
        font-size: 14px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #000000;
      }
    }
  }

  .priceSetting {
    > span {
      font-size: 14px;
      font-family: Source Han Sans CN-Bold, Source Han Sans CN;
      font-weight: 700;
      color: #000000;
    }
  }
  .config {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 80px;
    height: 34px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
    cursor: pointer;
    &:active {
      opacity: 0.7;
    }
  }

  .slider-demo-block {
    padding: 0 16px;
    margin-top: 39px;
    width: 100%;
    .text {
      padding: 0 3px;
      > span {
        margin-right: 50px;
      }
    }
  }
}
.sliderBox {
  flex-wrap: wrap;
  .sliderBox_itemActice {
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%) !important;
    > span {
      color: #fff !important;
    }
  }
  .sliderBox_item {
    margin-top: 10px;
    width: 120px;
    height: 46px;
    background: #f3f4f5;
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
  }
}
.advacedformBoxactive {
  border-radius: 0 10px 10px 0 !important;
}
.adbox {
  position: relative;
  height: 100%;
  padding: 20px;
  overflow: auto;
  padding-bottom: 40px;
}
.classboxnwq {
  position: relative;
}
.xuanbutton {
  margin: 0 auto;
  height: 40px;
  width: 100%;
  position: absolute;
  background-color: #fff;
  bottom: 0;
  z-index: 999;
  .advacedformBoxcomconfg {
    width: 240px;
    height: 34px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 6px 6px 6px 6px;
    opacity: 1;
    > span {
      font-size: 14px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      font-weight: 700;
      color: #ffffff;
    }
  }
}
.classbox {
  position: absolute;
  // top: 71px;
  // left: 0;
  // transition: 2s;

  animation: move 2s;
  animation-fill-mode: forwards;
}
@keyframes move {
  from {
    left: 0;
  }
  to {
    left: 140px;
    animation-fill-mode: forwards;
  }
}
.advacedformBox {
  overflow: auto;
  z-index: 11;
  position: relative;
  width: 282px;
  height: 401px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  border-radius: 10px;
  .formItem {
    width: 100%;
    cursor: pointer;
    .formType {
      .line {
        width: 2px;
        height: 16px;
        background: linear-gradient(360deg, #9ed8e6 0%, #a1f0c0 100%);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
      }
      > span {
        margin-left: 12px;
        font-size: 14px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #000000;
      }
    }
    .formboxactive {
      > span {
        color: #67c9dc !important;
      }
    }
    .formbox {
      width: 100%;
      margin-left: 10px;
      // margin-bottom: 30px;
      flex-wrap: wrap;
      .boxitem {
        // width: 33%;
        height: 40px;

        margin-right: 31px;
        // margin-top: 20px;
        > span {
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #656f79;
        }
      }
    }
    // > img {
    //   width: 28px;
    // }

    // &:hover {
    //   background-color: #f3f4f5;
    //   > span {
    //     color: #67c9dc;
    //   }
    // }
  }

  .advacedformBoxcomconfg-box {
    padding-bottom: 20px;
  }
}

.adbox::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

/* 滚动条滑块样式 */
.adbox::-webkit-scrollbar-thumb {
  background-color: #ececec;
  border-radius: 2px;
}

/* 滚动条轨道样式 */
.adbox::-webkit-scrollbar-track {
  background-color: #f7f9fa;
  height: 80% !important;
}

/* 鼠标悬停时滚动条轨道样式 */
.adbox::-webkit-scrollbar-track:hover {
  background-color: #f7f9fa;
}

.advacedformactive {
  left: 0 !important;
  border-radius: 10px 0 0 10px !important;
}
.advacedform {
  z-index: 11;
  position: absolute;
  // top: 71px;
  left: 0;
  width: 140px;
  // height: 520px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  transition: all 0.3s;
  .formItem {
    cursor: pointer;
    padding: 0 10px;
    height: 50px;
    > img {
      width: 28px;
    }
    > span {
      margin-left: 12px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    &:hover {
      border-radius: 10px;
      background-color: #f3f4f5;
      > span {
        color: #67c9dc;
      }
    }
  }
}
.advacedbox {
  cursor: pointer;
  background: #f3f4f5;
  border-radius: 10px;

  padding: 11px 10px;

  margin-right: 10px;
  > span {
    margin-right: 4px;
    font-size: 14px;
    font-family: Microsoft YaHei-Regular, Microsoft YaHei;
    font-weight: 400;
    color: #64c8dc;
  }
  > img {
    width: 19px;
    height: 19px;
  }
}
.wenhao {
  position: fixed;
  right: 56px;
  bottom: 87px;
  > img {
    width: 56px;
  }
}
.homepage {
}
.jiansuo {
  z-index: 10;
  position: relative;
  .active {
    cursor: pointer;
    margin-left: 10px;

    width: 98px;
    height: 40px;
    background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%);
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    &:first-child {
      margin-left: 0;
    }
    > span {
      padding: 0 13px 0 1px;

      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #ffffff;
    }
    > img {
      width: 16px;
      height: 16px;
    }
    &:active {
      opacity: 0.7;
    }
  }
  .item {
    cursor: pointer;
    margin-left: 10px;
    width: 98px;
    height: 40px;
    border-radius: 10px 10px 10px 10px;
    opacity: 1;
    border: 1px solid #64c8dc;
    &:first-child {
      margin-left: 0;
    }
    > img {
      width: 16px;
      height: 16px;
    }
    > span {
      padding: 0 13px 0 1px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #64c8dc;
    }
    &:active {
      opacity: 0.7;
    }
  }
}
.leftmenu {
  left: 218px !important;
  bottom: -493px !important;
}
.menu {
  z-index: 10;
  position: absolute;
  bottom: -603px;
  left: 110px;
  width: 511px;
  //   height: 494px;
  background: #ffffff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.1);
  border-radius: 10px 10px 10px 10px;
  opacity: 1;
  padding: 20px;
  .menuswaeic {
    width: 100%;
    height: 100%;

    > div {
      &:not(first-child) {
        margin-top: 40px;
      }
    }

    .type {
      > span {
        display: block;
        margin-bottom: 9px;
        font-size: 16px;
        font-family: Microsoft YaHei-Bold, Microsoft YaHei;
        font-weight: 700;
        color: #000000;
      }
      // &:nth-child(2) {
      //   margin-top: 40px;
      // }
      // &:nth-child(3) {
      //   margin-top: 40px;
      // }
      .boxactice {
        background: linear-gradient(90deg, #9ed8e6 0%, #a1f0c0 100%) !important;
        > span {
          color: #fff !important;
        }
      }
      .chooseitem {
        flex-wrap: wrap;
        .box {
          cursor: pointer;
          margin-right: 9px;
          margin-bottom: 9px;
          width: 31%;
          height: 46px;
          background: #f3f4f5;
          border-radius: 6px 6px 6px 6px;
          opacity: 1;
          &:last-child {
            margin-right: 0;
          }
          > span {
            font-size: 14px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: #000000;
          }
        }
      }
    }
  }
}
.advanced {
  position: relative;
  z-index: 1;
  .advanded_item {
    padding: 11px 10px;
    border-radius: 10px;
    cursor: pointer;
    margin-right: 10px;
    > span {
      margin-right: 4px;
      font-size: 14px;
      font-family: Microsoft YaHei-Regular, Microsoft YaHei;
      font-weight: 400;
      color: #000000;
    }
    > img {
      width: 19px;
      height: 19px;
    }
  }
}
</style>
